<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dom练习2</title>
    <script>
        window.onload=function(){
            var oUl=document.getElementById("list");
            var oLi=oUl.getElementsByTagName("li");
            for(var i=0;i<oLi.length;i++){
                oLi[i].getElementsByTagName("button")[0].onclick=function(){//上移
                    var node=this.parentNode;
                    var prenode=node.previousElementSibling;
                    if(prenode){
                        oUl.insertBefore(node,prenode);
                    }else{
                        oUl.appendChild(node);
                    }
                }
                oLi[i].getElementsByTagName("button")[1].onclick=function(){//下移
                    var node=this.parentNode;
                    var nextNode=node.nextElementSibling;
                    var fristNode=oUl.firstChild;
                    if(nextNode){
                        oUl.insertBefore(node,nextNode.nextElementSibling);
                    }else{
                        oUl.insertBefore(node,fristNode);
                    }
                }
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>第一行新闻<button>上移</button><button>下移</button></li>
    <li>第二行新闻<button>上移</button><button>下移</button></li>
    <li>第三行新闻<button>上移</button><button>下移</button></li>
    <li>第四行新闻<button>上移</button><button>下移</button></li>
    <li>第五行新闻<button>上移</button><button>下移</button></li>
    <li>第六行新闻<button>上移</button><button>下移</button></li>
</ul>
</body>
</html>